<template>
  <div>
    <ul class="article" v-if="article.length > 0">
      <li
        v-for="(item, article_id) in article"
        :key="article_id"
        @click="details(item.article_id)"
      >
        <!-- 文章标题 -->
        <div class="title">{{ item.article_title }}</div>
        <!-- 文章摘要 -->
        <div class="abstract">{{ item.article_summary }}</div>
        <span class="label" v-if="item.original_or_reprint == 1"> 原创 </span>
        <span
          class="label"
          v-else
          style="background-color: rgb(0 122 242 / 24%); color: #0c0b0d87"
        >
          转载
        </span>
        &nbsp;&nbsp;发布时间{{
          timeDetal(item.article_createtime)
        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
          item.article_view_count
        }}
        浏览量 · {{ item.article_like_count }} 点赞 ·
        {{ item.article_comment_count }} 评论
      </li>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageNum * 10"
        @current-change="currentPage"
        :current-page="page"
      >
      </el-pagination>
    </ul>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "AllArticle",
  mixins: [mixin],
  data() {
    return {
      article: [], //文章列表
      page: 1, //页码（默认为1）
      uid: "", //用户id
      pageNum: "",
    };
  },
  methods: {
    // 全部文章切换页码
    currentPage(val) {
      this.article = [];
      this.page = val;
      this.articLoad();
    },
    //所有文章文章加载
    articLoad(other) {
      var url = "article/findUserArticle";
      var obj = {
        pageNum: this.page, //页码（默认为1）
        pageSize: 10, //每一页的条数
      };
      //请求他人数据时进行参数和url变换
      if (other) {
        obj = {
          pageNum: this.page, //页码（默认为1）
          pageSize: 10, //每一页的条数
          uid: this.uid,
        };

        url = "article/findUserPublicArticle";
      }
      this.$http({
        method: "post",
        url: url,
        params: obj,
      }).then(({ data }) => {
        console.log(data.data);
        // console.log(data.list);
        if (data.flag) {
          console.log("文章加载成功!");
          this.article = data.data.list;
          this.pageNum = Math.ceil(data.data.total / 10);
        } else {
          console.log("文章加载失败!");
        }
      });
    },
  },
  mounted() {
    //判断时候访问他人主页
    if (this.$route.query.id) {
      this.uid = this.$route.query.id;
      this.articLoad("other");
    } else {
      this.articLoad();
    }
  },
};
</script>

<style lang="less" scoped>
//文章列表渲染
.article {
  width: 100%;
  padding-bottom: 70px;
  li {
    cursor: pointer;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #e4e7ed;
    color: #4b4a4a;

    .title {
      width: 250px;
      font-size: 20px;
      letter-spacing: 2px;
      margin: 10px 0px;
      color: #302f2f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        color: orangered;
      }
    }
    .abstract {
      margin: 20px 0px;
      width: 100%;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label {
      width: 30px;
      font-size: 12px;
      height: 15px;
      padding: 3px;
      text-align: center;
      background-color: rgba(227, 62, 51, 0.1);
      color: #e33e33;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
}
.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
</style>